/**
 * Popup control
 * DESCRIPTION:
 * This class creates a popup that will open below an anchor element.  The 
 * contents of the popup will be specified by the elem parameter.  The elem will
 * automatically be hidden when the control is created and have its contents 
 * styled as per popup.css. 
 *  
 * FUNCTIONALITY:
 * The anchor is what is used to open the popup and for its positioning.  If the
 * anchor is clicked on, the popup will show, opening directly below the anchor,
 * having the right of the popup match the right of the anchor.  If the width 
 * param is set to "anchor" then the popup's width will be the same as the anchor.
 * The popup will close if there is a click outside the popup or anchor area.
 * 
 * USE:
 * To use the popup control, include UTSDK.js in any HTML page.  UTSDK.js will
 * automatically include the popup control.  The popup can then be created by calling
 * new UTSDK.popup(container, anchor, width).  With container being where the 
 * popup contents is defined, anchor being the element that the popup will open
 * next too and width being optional: default "auto".  
 * 
 * VERSIONING:
 * v1.0 - Created control
 * v1.1 - Added fade in/out
 * v1.2 - Added width parameter
 * v1.3 - Automatically set popup definition to display: hidden so that it is not
 *        needed in the popup definition
 * v1.4 - bugfix: popup position on bowser resize
 *  
 * @param {element} elem that contains the HTML contents of the popup
 * @param {element} anchor the element that the popup will open near
 * @param {string} width the width of the popup. options {auto|anchor)
 */
UTSDK.popup = function(elem, anchor, width) {
    var _this = this;
    var _container = elem;
    var _anchor = anchor;
    var _width = width;
    if (_width === null)
        _width = "auto";

    /* Import calendar style */
    UTSDK.addStylesheet("popup.css");
    UTSDK.addClass(_container, "popup"); //popup style
    UTSDK.addClass(_container, "hidden"); //hide popup on creation

    /**
     * This method displays the popup.  It is called when the anchor element is 
     * clicked on.  First it gets the anchors location so that the popup containers
     * location can be set to directly under even if the anchor element moves.
     * Adds an event listener to the window to click the popup if the user clicks
     * outside the anchor or popup container.
     */
    this.display = function() {
        UTSDK.addClass(_anchor, "tabActive");
        UTSDK.fadeIn(_container, 0.7);
        this.position();
        window.addEventListener("click", close);
    };

    /**
     * Hides the popup, used when clicking on the anchor or outside the popup.
     * Removes the click listener from the window as it is only needed when the 
     * popup is open.
     */
    this.hide = function() {
        UTSDK.fadeOut(_container, 1);
        UTSDK.removeClass(_anchor, "tabActive");
        window.removeEventListener("click", close);
    };

    /**
     * Toggles the open state of the popup
     */
    this.toggle = function() {
        if (_container.style.display === "none" ||
                _container.style.display === "")
            _this.display();
        else
            _this.hide();
    };
    
    /**
     * This method positions the popup near the anchor
     */
    this.position = function() {
        var anchorRect = _anchor.getBoundingClientRect();
        _container.style.left = anchorRect.right - _container.offsetWidth + "px";
        _container.style.top = anchorRect.bottom + "px";
        if (_width === "anchor") {
            _container.style.width = anchorRect.width + "px";
        }
    };

    /**
     * registers the elements for click events
     */
    function registerEvents() {
        _container.addEventListener("click", stopPropagation);
        _anchor.addEventListener("click", stopPropagation);
        window.addEventListener("resize", browserResize);
    }

    /**
     * Closes the popup
     */
    function close() {
        _this.hide();
    }

    /**
     * Stops bubbling of click events so that when the popup is clicked on, the 
     * event doesn't bubble to the window and close the popup.
     * @param {event} evt - the click event
     */
    function stopPropagation(evt) {
        evt.stopPropagation();
    }

    /**
     * This method moves the popup if it is open when the browser resizes
     * @param {event} evt - resize event
     */
    function browserResize(evt) {
        if (_container.style.display === "block")
            _this.position();
    }

    registerEvents(); //Whent he popup is created register events
};


